<template>
  <section class="RoleIndex-container">
    <role-search ref="search" @onSearch="doSearch">
      <role-list :items="items">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog"
            />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-quanxian"
              tooltip="设置权限"
              @click="showSetPowersDialog(scope.row)"
            />
            <quick-icon-button
              icon="icon-xiugai"
              tooltip="编辑"
              @click="showEditDialog(scope.row)"
            />
            <quick-icon-button
              icon="icon-shanchu"
              tooltip="删除"
              @click="deleteRole(scope.row.id)"
            />
          </quick-action-bar>
        </template>
      </role-list>
    </role-search>

    <role-add ref="addDialog" @added="refresh" />
    <role-edit ref="editDialog" @edited="refresh" />
    <role-set-powers ref="setPowersDialog" />
  </section>
</template>

<script>
import RoleSearch from "./RoleSearch.vue";
import RoleList from "./RoleList.vue";
import RoleAdd from "./RoleAdd.vue";
import RoleEdit from "./RoleEdit.vue";
import _api from "@/common/api/role";
import RoleSetPowers from "./RoleSetPowers.vue";

export default {
  components: {
    RoleSearch,
    RoleList,
    RoleAdd,
    RoleEdit,
    RoleSetPowers,
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {
    doSearch(items) {
      this.items = items;
    },

    showAddDialog() {
      this.$refs.addDialog.showDialog();
    },

    showEditDialog(item) {
      this.$refs.editDialog.showDialog(item);
    },

    showSetPowersDialog(id) {
      this.$refs.setPowersDialog.showDialog(id);
    },

    deleteRole(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    refresh() {
      this.$refs.search.getRoles();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.RoleIndex-container {
  height: 100%;
}
</style>